<template>
  <div class="mineLi">
    <div class="li" v-for="(item,index) in tabs" :key="index">
      <div class="tip">{{item.tip}}</div>
      <div class="details">
        <div class="left">
          <img src="@/assets/logo.png" alt="">
        </div>
        <div class="right">
          <div class="div">{{item.title}}</div>
          <div class="div">{{item.qqq}}</div>
          <div class="img" >
            <img src="@/assets/images/ic_stars.png" alt="" v-for="i in item.num">
            <img src="@/assets/images/ic_stars2.png" alt="" v-for="i in (5-item.num)">
          </div>
        </div>
      </div>
      <div class="sp1"><span>兑换ID：201905051234556765</span></div>
      <div class="sp2"><span>剩余时间：23天15小时30分钟30秒</span></div>
      <div class="btn" v-if="item.type">
        <input class="groupBtn" type="button" value="去完成" >
        <input class="groupBtn" type="button" value="上传凭证"  @click="uploadDocuments">
      </div>
      <div class="statebtn" v-if="!item.type">
        <input class="statebtn1" type="button" value="待审核" >
        <input class="statebtn2" type="button" value="已通过" >
        <input class="statebtn3" type="button" value="未通过" >
        <input class="statebtn4" type="button" value="已作废" >
      </div>
    </div>
  </div>
</template>

<script>
    /**
     *
     * @Author zzl
     * @Date 2019/5/17 10:11.
     */

    export default {
        mounted() {

        },
        components: {},
        props: {},
        data() {
            return {
              tabs:[{
                title:'网红熊发传单',qqq:'地址在仓山万达金街，穿着网红熊外套发111111111111111...',num:3,tip:'查看奖品',type:true
              },{
                title:'222222222222',qqq:'地址在仓山万达金街，穿着网红熊外套发111111111111111...',num:5,tip:'查看奖品',type:false
              },{
                title:'111111111111111',qqq:'地址在仓山万达金街，穿着网红熊外套发111111111111111...',num:3,tip:'查看奖品',type:false
              },{
                title:'111111111111111',qqq:'地址在仓山万达金街，穿着网红熊外套发111111111111111...',num:3,tip:'查看奖品',type:false
              },{
                title:'111111111111111',qqq:'地址在仓山万达金街，穿着网红熊外套发111111111111111...',num:3,tip:'查看奖品',type:false
              },{
                title:'111111111111111',qqq:'地址在仓山万达金街，穿着网红熊外套发111111111111111...',num:3,tip:'查看奖品',type:false
              },{
                title:'111111111111111',qqq:'地址在仓山万达金街，穿着网红熊外套发111111111111111...',num:3,tip:'查看奖品',type:false
              }],
            }
        },
        computed: {},
        methods: {
          /**
           * 上传凭证
           */
          uploadDocuments(){
            this.$router.push({path:'/uploadDocuments'})
          }
        },
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }
</script>

<style lang="less" scoped>
  .mineLi{
    padding: 0 0.33rem;
    box-sizing: border-box;
    width: 100%;
    .li{
      position: relative;
      width: 100%;
      height: 4rem;
      border-top: 1px solid rgba(239,239,239,0.5);
      .tip{
        font-size: 0.3rem;
        position: absolute;
        top: 0px;
        right: 0px;
        width: 1.42rem;
        height: 0.5rem;
        line-height: 0.5rem;
        background: #FF695A;
        -webkit-border-radius: 0 0 0.1rem 0.1rem;
        -moz-border-radius: 0 0 0.1rem 0.1rem;
        border-radius: 0 0 0.1rem 0.1rem;
        color: #FFFFFF;
      }
      .details{
        width: 100%;
        height: 2.1rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .left{
          width: 1.56rem;
          height: 1.56rem;
          margin-right: 0.2rem;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .right{
          width: 5rem;
          height: 1.56rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 0.36rem;
          .div{
            width: 5rem;
            text-align: left;
            overflow:hidden; //超出的文本隐藏
            text-overflow:ellipsis; //溢出用省略号显示
            white-space:nowrap; //溢出不换行
            color: #333333;
          }
          div:nth-child(2){
            color: #D2D2D2;
            font-size: 0.26rem;
          }
          .img{
            display: flex;
            flex-direction: row;
            justify-content: left;
            img{
              width: 0.39rem;
              height: 0.38rem;
              margin-right: 0.16rem;
            }
          }
        }
      }
      .sp1,.sp2{
        text-align: left;
        color: #D2D2D2;
        font-size: 0.26rem;
        line-height: 0.5rem;
      }
      .btn{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        margin-top: 0.1rem;
        .groupBtn{
          background: #FDCC4A;
          border-radius: 0.1rem;
          color: white;
          border: 0;
          width: 1.42rem;
          height: 0.5rem;
          margin-left: 0.18rem;
          font-size: 0.26rem;
        }


      }
      .statebtn{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 0.1rem;
        .statebtn1,.statebtn2,.statebtn3,.statebtn4{
          width: 1.42rem;
          height: 0.5rem;
          border: 0;
          border-radius: 0.1rem;
          font-size: 0.26rem;
        }
        .statebtn1{
          background: #FFF5DB;
          color: #FDCC4A;
        }
        .statebtn2{
          color: #6EDC79;
          background: #E2F8E4;
        }
        .statebtn3{
          color:#FF695A;
          background:  #FFE1DE;
        }
        .statebtn4{
          color:#CECFD3;
          background:  #F5F5F6;
        }
      }
    }
  }
</style>
